<template>
  <div>
    <input type="text" v-model="name" /> {{ name }} <br />
    <input type="number" v-model="age" /> {{ age }} <br />
    <button @click="handleClick">click</button> <br />
    {{ state }}
  </div>
</template>
<script setup>
// toRefs: 将reactive对象属性转化为单个ref对象: state, myRef
import { reactive, toRefs } from "vue";

const state = reactive({
  name: "孙小双",
  age: 29,
});
const myRef = toRefs(state);
const { name, age } = myRef;
const handleClick = () => {
  state.age++;
};
</script>